<template>
  <div class="monitorcom">
    <!-- <n-tabs type="line" animated>
      <n-tab-pane name="目标提取" tab="目标提取">
        
      </n-tab-pane>
      <n-tab-pane name="变化监测" tab="变化监测">
        <div>
        <el-button type="primary" size="default" @click="openSplitpannel()"></el-button>
        
        </div>
      </n-tab-pane>
    </n-tabs> -->

    <!-- <n-card title="">
      卡片内容
    </n-card> -->

    <el-scrollbar>
      <div style="" class="carddiv" v-for="item in monitorlist">
        <div class="fwwsbcwh1">
          <div>
            <n-ellipsis style="max-width: 140px">
              {{ item.name }}
            </n-ellipsis>
            &nbsp;
            <n-tag :type="getTagType(item.typeName)"> {{ item.typeName }} </n-tag>
          </div>
          <div>
            <!-- <n-popover placement="left" trigger="hover">
              <template #trigger>
                <i class="iconfont icon-warning" style="cursor: pointer"></i>
              </template>
              <div class="" v-for="(item_detail, index) in item.detail">
                {{ index }}: {{ item_detail }}
              </div>
            </n-popover> -->
            &nbsp;
            <i
              class="iconfont icon-search"
              style="cursor: pointer"
              @click="itemClick(item)"
            ></i>
          </div>
        </div>
        <div class="cardcontent">
          <div style="word-break: break-all;">{{ item.msg }}</div>
          <div style="text-align: right">{{item.updatetime}}</div>
        </div>
      </div>
    </el-scrollbar>


  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";

import { useEarthStore } from "@/stores/earth";

import targetJson from "./target.json";

import Monitor from "./Monitor";
import { apiList } from "@/api/apiList";
import { isOK } from '@/utils/resUtils'


const earthStore = useEarthStore();

let monitorlist = ref([]);

const monitor = new Monitor();

const getTagType = (type) => {
  let tagtype = "";
  switch (type) {
    case "目标识别":
      tagtype = "success";
      break;
    case "变化检测":
      tagtype = "warning";
      break;

    default:
      break;
  }
  return tagtype;
};

onMounted(() => {
  monitorlist.value = [
    // {
    //   name: "无人机",
    //   type: "detection",
    //   typeName: "变化检测",
    //   msg: "位置发生变化",
    //   detail: {
    //     生成模型: "模型1",
    //     关联目标: "mq-无人机",
    //     生成时间: "2023-7-5",
    //   },
    //   updatetime: "2023-7-6",
    // },
    // {
    //   name: "港口",
    //   type: "recognize",
    //   typeName: "目标识别",
    //   msg: "目标发生变化",
    //   detail: {
    //     生成模型: "模型1",
    //     关联目标: "横须贺港口",
    //     生成时间: "2023-7-5",
    //   },
    //   updatetime: "2023-7-6",
    // },
  ];

  //添加变化检测和目标识别测试数据
  apiList.getMonitorInfoList().then((res) => {
    res.code = 0
    if (isOK(res)) {
      // "created_time": "2023-09-11 18:41:05",
      // "data_id": "773e9717-a7d9-4ab1-8510-180ad948546e",
      // "data_path": "C:\\zs\\dtjc_test_data\\test\\20230911\\aa6b3592124b4dd1b521d0277f34281d_859\\68c0800b-a87b-4aeb-ab83-ee23ea92cec5\\横须贺目标识别_20230911184011185_35.296968_139.634356-19.tif",
      // "descinfo": "从影像中识别到多个plane,ship目标",
      // "id": "91787b4a-6a77-4dce-aef3-481a3ddb8c5d",
      // "shp_path": "C:\\zs\\dtjc_test_data\\test\\20230911\\aa6b3592124b4dd1b521d0277f34281d_859\\68c0800b-a87b-4aeb-ab83-ee23ea92cec5\\横须贺目标识别_20230911184011185_35.296968_139.634356-19_SEB_BBVA_best_ship.shp",
      // "target_id": "68c0800b-a87b-4aeb-ab83-ee23ea92cec5",
      // "target_name": "横须贺目标识别",
      // "type": "目标识别"
      res.result.map(item => {
        let mitem = {
            name: "-",
            type: "recognize",
            typeName: "目标识别",
            msg: "识别到新目标",
            detail: {
              生成模型: "目标识别模型",
              关联目标: "左营",
              生成时间: "2023-7-5",
            },
            updatetime: "2023-8-5",
            ...item
          };
          mitem.name = item.target_name;
          mitem.typeName = item.type;
          mitem.msg = item.descinfo;
          mitem.updatetime = item.created_time;
          // mitem.msg = item.descinfo;
  
          monitorlist.value.push(mitem)
      })
        console.log(monitorlist.value);
    }

  })



  // apiList.queryTarget({ keywords: "目标识别" }).then((res) => {
  //   if (isOK(res)) {
  //     res.result.map((item) => {
  //       let mitem = {
  //         name: "",
  //         type: "recognize",
  //         typeName: "目标识别",
  //         msg: "识别到新目标",
  //         detail: {
  //           生成模型: "目标识别模型",
  //           关联目标: "左营",
  //           生成时间: "2023-7-5",
  //         },
  //         updatetime: "2023-8-5",
  //       };
  //       mitem.name = item.name;
  //       apiList.queryDataByType({ target_id: item.id }).then((resa) => {
  //         if (isOK(resa)) {
  //           mitem.data = resa.result;
  //         }
  //       });
  //       monitorlist.value.push(mitem)
  //     });
  //   }
  // });
  // apiList.queryTarget({ keywords: "变化监测" }).then((res) => {
  //   if (isOK(res)) {
  //     res.result.map((item) => {
  //       let mitem = {
  //         name: "",
  //         type: "detection",
  //         typeName: "变化检测",
  //         msg: "目标有变化",
  //         detail: {
  //           生成模型: "变化监测模型",
  //           关联目标: "左营",
  //           生成时间: "2023-7-5",
  //         },
  //         updatetime: "2023-7-6",
  //       };
  //       mitem.name = item.name;
  //       apiList.queryDataByType({ target_id: item.id }).then((resa) => {
  //         if (isOK(resa)) {
  //           mitem.data = resa.result;
  //         }
  //       });
  //       monitorlist.value.push(mitem)
  //     });
  //   }
  // });
});

const itemClick = (item) => {
  // 清空之前
  removeAll();
  switch (item.type) {
    //目标识别相关
    case "目标识别":
      monitor.addTarget(item);
      break;
    // 变化监测相关
    case "变化检测":
      openSplitpannel(item.type, item);

      break;

    default:
      break;
  }
};

const openSplitpannel = (type, data) => {
  earthStore.pannellist["splitpannel"] = {
    name: "split-pannel",
    options: {
      type,
      data,
    },
  };
};

const removeAll = () => {
  monitor.removeTarget();
  delete earthStore.pannellist["splitpannel"];
};

const closewindow = () => {
  //清空操作
  removeAll();
};

defineExpose({
  closewindow,
});
</script>
<style lang="scss" scoped>
.carddiv {
  padding: 5px;
  margin: 5px;
  background-color: #1d1d1dab;
  border: 1px solid #1d1d1dab;
  border-radius: 3px;
}

.cardcontent {
  padding: 5px;
  margin: 5px;
  background-color: #e9e4e462;
  border: 1px solid #1d1d1dab;
  border-radius: 3px;
}

.monitorcom {
  // padding: 0px 5px;
  // overflow-y: auto;
  // height: 300px;
  height: calc(100% - 10px);
  padding: 0px 10px;box-sizing: border-box;

}
</style>
